<template>
	<view class="clock-in-page">
		<view v-if="loading" class="loading-mask" />

		<view v-else>
			<default-page v-if="showDefault" ref="defaultRef" />
			<clocked-in-page v-else ref="clockedInRef" @clockIn:close="onClockInClose" />
		</view>

		<view v-if="!isLogin" class="login-mask">
			<get-phone />
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import DefaultPage from './components/clockIn/Default.vue'
	import ClockedInPage from './components/clockIn/ClockedIn.vue'
	import shareMixin from '../mixins/shareMixin'
	export default {
		name: 'ClockIn',
		components: {
			DefaultPage,
			ClockedInPage
		},
		mixins: [shareMixin],
		data() {
			return {
				loading: true
			}
		},
		computed: {
			...mapState(['clockInRuleData', 'isLogin']),
			showDefault() {
				if (this.clockInRuleData) {
					const {
						is_enable
					} = this.clockInRuleData
					return !is_enable
				}
				return true
			}
		},
		onLoad() {
			this.showMask()
			// // 监听打卡设置更新
			uni.$on('clockin-setting-update', () => {
				console.log('----监听到了打卡设置更新了---')
				this.showMask()
			})
		},
		methods: {
			...mapActions(['getClockInRuleData', 'setClockInDetail']),
			showMask() {
				console.log('showMask')
				this.loading = true
				this.$nextTick(() => {
					setTimeout(() => {
						this.loading = false
					}, 500)
				})
			},
			// 关闭打卡后重新获取打卡规则，更新本地规则信息
			onClockInClose() {
				this.getClockInRuleData()
				// this.setClockInDetail({})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.clock-in-page {
		position: relative;

		.loading-mask {
			z-index: 1;
			position: absolute;
			width: 100%;
			height: 100vh;
			background-color: #F5F5F5;
		}
	}

	.login-mask {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}
</style>